<template>
<div>
  <div class="nav">
    <p> 考试列表</p>
    <div class="form">
      <span>关键词：</span>
      <el-input placeholder="考试名称" v-model="params.key"></el-input>
      <span>状态：</span>
      <el-select  v-model="params.result" >
      <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      </el-option>
      </el-select>
      <el-button type="primary" size="default" @click="search">查询</el-button>
      
    </div>
  </div>
  <!-- <el-empty description="暂无数据" v-show="dataTable.length<0"></el-empty> -->
  <!-- 列表 -->
  <div class="table">
    <div class="list">
      <div class="li" v-for="item in dataTable" :key="item.id"  @click="getNext(item.id,item.result)">
        <div class="litop">
          <img v-if="item.result=='未考试'" src="http://edu.90000p.com/exam/cyx/assets/notInvolved.69f5f7c2.jpg" alt="">
          <img v-else-if="item.result=='未通过'" src="http://edu.90000p.com/exam/cyx/assets/didNotPass.dc717b15.jpg" alt="">
          <img v-else-if="item.result=='待阅卷'" src="http://edu.90000p.com/exam/cyx/assets/wait.4d1f79c9.jpg" alt="">
          <img v-else="item.result=='已通过'" src="http://edu.90000p.com/exam/cyx/assets/yes.8b1bd2e5.jpg" alt="">
          <div class="title">
            <span>{{item.title}}</span>
          </div>
        </div>
        <div class="time">
          <span>考试时间: {{item.begintime==null?'不限':item.begintime.substr(0,16)+'至'+item.endtime.substr(0,16)}}</span>
          <span>{{item.studentcounts}}人通过</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <pages
        :total="total"
        :page="params.page"
        :pageSize="params.psize"
        @changePageSize="handleSizeChange"
        @changePage="handleCurrentChange"
      />

</div>
</template>

<script setup lang='ts'>
import { ref,reactive ,toRefs} from "vue";
import { testList } from "../../api/test";
import pages  from "../../components/pages/pages.vue";
import { useRouter } from "vue-router";

const router=useRouter()
// 状态选项
const options = [
  {
    value: "",
    label: "所有",
  },
  {
    value: "未考试",
    label: "未考试",
  },
  {
    value: "待阅卷",
    label: "待阅卷",
  },
  {
    value: "已通过",
    label: "已通过",
  },
  {
    value: "未通过",
    label: "未通过",
  },
];
// 
const data:any=reactive({
   // 接口请求的数据
   params: {
    page: 1,
    psize: 10,
    key: "",
    result: "",
  },
})
const{params}=toRefs(data)
let total=ref(0)//分页
let dataTable=ref()
// 请求列表
const getlist=async()=>{
  let res:any=await testList(data.params)
  // console.log(res);
  if(res.errCode===10000){
    dataTable.value=res.data.list
    total.value=res.data.counts
  }
  
}
getlist()
// 分页
const handleSizeChange = (val: number) => {
  data.params.psize=val
  getlist()
}
const handleCurrentChange = (val: number) => {
  data.params.page=val
  getlist()
}
// 查询
const search=()=>{
  getlist()
}
// 跳转
const getNext=(id:number,result:string)=>{
  console.log(result);
  
  if(result==='未考试'){
        router.push({path:'/examprepare',query:{id}})
    }else{
        router.push({path:'/examresults',query:{id}})
    }
  
}
</script>

<style scoped lang='less'>
.nav{
  display: flex;
  justify-content: space-between;
  .form{
    font-size: 10px;
    display: flex;
    align-items: center;
    white-space:nowrap;
    margin:  0 10px;
  }
}
.table{
  .list{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    .li{
      cursor: pointer;
      width: 30%;
      border: #ebebeb 1px solid;
      background-color: #fafbff6a;
      padding: 10px 10px 20px;
      margin-top: 20px;
      margin-left: 17px;
      border-radius: 5px;
      .litop{
        display: flex;
        img{
          width: 130px;
          height: 74px
        }
        .title{
          padding: 10px;
          font-size: 10px;
        }
      }
      .time{
        display: flex;
        justify-content:space-between;
        font-size: 10px;
        margin: 10px;
      }
    }
  }
}
</style>